<template>
  <div class="censusArea">
    <div class="box-left">
      <region-tree :is-edit-tree="true" :key="'2'"/>
    </div>
    <div class="box-right">
      <a-map :enable-search="true"
      :search-options="{
        city: '呼和浩特市',
        type: '地点'
      }"
      @search-complete="handleSearchResult"/>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator';
import RegionTree from "@/views/region/components/RegionTree.vue";
import BoundaryCard from "@/views/region/components/BoundaryCard.vue";
import AMap from "@/components/Map/AMap.vue";

@Component({
  components: {AMap, RegionTree, BoundaryCard}
})
export default class regionSetting extends Vue {

  handleSearchResult(data: any) {
    console.log(data);
}
}
</script>
<style lang="scss" scoped>
.censusArea {
  display: flex;
  height: 100%;

  .box-left {
    height: auto;
    min-height: 100vh;
  }

  .box-right {
    flex: 1;
    position: relative;

    .boundary-right {
      position: absolute;
      top: 18px;
      left: 18px;
      z-index: 1;
    }
  }
}
</style>
